<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部css样式-->
    <link rel="stylesheet" href="css/user.css">
    <!--导入vue框架-->
    <script src="js/vuejs-2.5.16.js"></script>
    <!--导入axios,axios是会vue框架中对ajax的封装-->
    <script src="js/axios-0.18.0.js"></script>
<!--在有网的情况下引入前端分页插件-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>删除操作</th>
        </tr>
        <tr v-for="user in userlist">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.password+}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
            <td><button>删除</button></td>

        </tr>
    </table>
    <!--分页的区域-->
    <div>
        <el-pagination
            background
            @current-change="currentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="prev, pager, next,jumper"
            :total="pagination.total">
        </el-pagination>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            userlist:[],
            pagination:{
                currentPage:1,
                pageSize:2,
                total:null
            }
        },
        created(){
            //在created方法中发送异步请求
            //第一次进行分页查询
            this.pageQuery();
        },
        methods:{
            //分页查询实现
            currentPage(curpage){
                this.pagination.currentPage=curpage
                this.pageQuery()
            },
            pageQuery() {
                axios.get("/user/pageQuery.do?pageNum="
                    +this.pagination.currentPage+
                    "&pageSize="+this.pagination.pageSize).then((res)=>{
                    this.userlist = res.data.userlist
                    this.pagination.total = res.data.total})
            }

        }
    })
</script>
</html>